<template>
  <div>
    <el-dialog width="740px"
               :title="dialogTitle"
               :visible.sync="dialogVisible"
               :before-close="tableClose">
      <el-form :model="dynamicValidateForm"
               ref="dynamicValidateForm"
               label-width="100px"
               class="demo-dynamic">
        <el-form-item prop="name"
                      label="流程名称"
                      :rules="[
            { required: true, message: '请输入流程名称', trigger: 'blur' },
          ]">
          <el-input v-model="addForm.processName"></el-input>
        </el-form-item>
        <!-- <el-form-item v-for="(workmanship, index) in dynamicValidateForm.workmanship"
                      :label="'工艺' + index+1"
                      :key="workmanship.key"
                      :prop="'workmanship.' + index + '.value'"
                      :rules="{
            required: true,
            message: '工艺不能为空',
            trigger: 'blur',
          }">
          <el-input v-model="workmanship.value"
                    style="width:40%"></el-input>
          <el-input v-model="workmanship.person"
                    style="width:40%"
                    placeholder="输入工艺负责人"></el-input>
          <el-button @click.prevent="removeDomain(workmanship)">删除</el-button>
        </el-form-item> -->
        <el-form-item prop="house"
                      label="所属屠宰场"
                      :rules="[
            { required: true, message: '请输入所属屠宰场', trigger: 'blur' },
          ]">
          <el-input v-model="addForm.xxx"></el-input>
        </el-form-item>
        <el-form-item prop="describe"
                      label="流程描述"
                      :rules="[
            { required: true, message: '请输入流程描述', trigger: 'blur' },
          ]">
          <el-input v-model="addForm.processDescribe"
                    type="textarea"
                    :rows="2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitForm('dynamicValidateForm')">提交</el-button>
          <el-button @click="addWorkmanship">新增工艺</el-button>
          <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
          <el-button @click="closeform()">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "AddFrom",
  props: {
    //是否打开表单
    dialogVisible: {
      Boolean,
      default: false,
    },
  },
  data () {
    return {
      //表头
      dialogTitle: "添加屠宰流程",
      dynamicValidateForm: {
        workmanship: [
          {
            value: "",
            person: "",
          },
        ],
        name: "",
        house: "",
        describe: "",
        addForm: {
          guige: 0,
          processDescribe: "string",
          processName: "string",
          shId: 0
        }
      },
    };
  },
  methods: {
    // 关闭弹窗
    tableClose () {
      this.$confirm("确认关闭？")
        .then(() => {
          this.closeform();
          location.reload();
        })
        .catch(() => { });
    },
    // 关闭编辑表单弹窗
    closeform () {
      this.$emit("closeDialog");
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // alert("submit!");
          this.$emit("add", this.addForm)
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    removeDomain (item) {
      var index = this.dynamicValidateForm.workmanship.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.workmanship.splice(index, 1);
      }
    },
    addWorkmanship () {
      this.dynamicValidateForm.workmanship.push({
        value: "",
        key: Date.now(),
      });
    },
  },
};
</script>